<template>
  <!-- 圈子管理页面 -->
  <view class="main">
    <!-- 头部 -->
    <view class="top_tou">
      <view class="left_" @tap="fanLastPage">
        <image
          src="../../images/aliang/navigation.png"
          mode="aspectFill"
        ></image>
      </view>
      <view class="center_"> 管理后台 </view>
      <view class="right_" @tap="handleBaocan"> 完成 </view>
    </view>
    <!-- 顶部信息展示 -->
    <view class="show_">
      <view class="item_ item1">
        <view class="shang_"> {{ orgDetail.peopleNumber }} </view>
        <view class="xia_"> 成员 </view>
      </view>

      <view class="shu_xian"></view>

      <view class="item_">
        <view class="shang_"> {{ orgDetail.browseCount }} </view>
        <view class="xia_"> 浏览数 </view>
      </view>

      <view class="shu_xian"></view>
      <view class="item_">
        <view class="shang_"> {{ orgDetail.postNumber }}</view>
        <view class="xia_"> 微帖 </view>
      </view>
      <view class="shu_xian"></view>

      <view class="item_ item2">
        <view class="shang_"> ￥{{ orgDetail.chargeAmount }} </view>
        <view class="xia_"> 加入费 </view>
      </view>
    </view>
    <view class="xian_hui"></view>
    <!-- 圈子基本设置 -->
    <view class="basSet">
      <view class="title"> 圈子基本设置 </view>
      <view class="list_">
        <view class="item_" @tap="hanldeTan(1)">
          <view class="zuo_"> 圈子名称 </view>
          <view class="you_">
            <text>{{ title }} </text>
            <image
              src="../../images/aliang/you_.png"
              mode="aspectFill"
              class="right_"
            ></image>
          </view>
        </view>
        <view class="item_" @tap="clk">
          <view class="zuo_"> 圈子图标 </view>
          <view class="you_">
            <image :src="oldPhoto" mode="aspectFill" class="you_tu"></image>
            <image
              src="../../images/aliang/you_.png"
              mode="aspectFill"
              class="right_"
            ></image>
          </view>
        </view>
        <view class="item_" @tap="hanldeTan(2)">
          <view class="zuo_"> 一句话介绍 </view>
          <view class="you_ you2">
            <text v-if="content">{{ content }}</text>
            <text class="kong_" v-if="content == ''"
              >圈子推荐,圈子海报中展示</text
            >
            <image
              src="../../images/aliang/you_.png"
              mode="aspectFill"
              class="right_"
            ></image>
          </view>
        </view>
        <!-- 标签 -->
        <view @tap="toBiaoqian()" class="item_">
          <view class="zuo_"> 标签 </view>
          <view class="you_">
            <text v-if="!lable_L" class="you_wu">未设置</text>
            <text class="text" v-if="lable_L">{{ lable_L }}</text>
            <image
              src="../../images/aliang/you_.png"
              mode="aspectFill"
              class="right_"
            ></image>
          </view>
        </view>

        <!-- 成员管理入口 -->
        <view class="item_" @tap="toCy">
          <view class="zuo_"> 成员管理 </view>
          <view class="you_">
            <image
              src="../../images/aliang/you_.png"
              mode="aspectFill"
              class="right_"
            ></image>
          </view>
        </view>
      </view>
    </view>
    <view class="xian_hui"></view>
    <!-- 圈子高级设置 -->
    <view class="higeSet">
      <view class="title"> 高级设置 </view>
      <view class="list_">
        <navigator
          :url="'/pages/index/chargeSet?id=' + quan_Id"
          hover-class="none"
          class="item_"
        >
          <image
            src="../../images/aliang/shoufeiSet.png"
            mode="aspectFill"
          ></image>
          <view class="top_"> 加入费 </view>
          <view class="bottom_"> 返利设置 </view>
        </navigator>
        <navigator
          :url="'/pages/circle/circleIntro?type=2&id=' + quan_Id"
          class="item_"
          hover-class="none"
        >
          <image
            src="../../images/aliang/jieshao.png"
            mode="aspectFill"
          ></image>
          <view class="top_"> 圈子介绍 </view>
          <view class="bottom_"> 提升吸引力 </view>
        </navigator>
        <view class="item_" @tap="toHaibao()">
          <image src="../../images/aliang/haibao.png" mode="aspectFill"></image>
          <view class="top_"> 推广海报 </view>
          <view class="bottom_"> 生成分享海报 </view>
        </view>
      </view>
    </view>

    <view class="zhuxiao" @tap="handleZhuX"> 注销圈子 </view>

    <avatar
      @upload="doUpload"
      quality="1"
      ref="avatar"
      selWidth="250upx"
      selHeight="250upx"
    ></avatar>

    <view class="prompt-box" v-if="isHidden">
      <view class="prompt-content contentFontColor">
        <view class="prompt-title" v-if="isInT == 1">名称</view>
        <view class="prompt-title" v-if="isInT == 2">一句话介绍</view>
        <!-- 名称 -->
        <input
          class="prompt-input"
          type="text"
          @input="handleTitle"
          :value="InputTitle"
          :maxlength="maxTitle"
          v-if="isInT == 1"
        />

        <view class="textarea" v-if="isInT == 2">
          <textarea
            class="prompt-textarea"
            @input="handleContent"
            :value="InputContent"
            maxlength="100"
            placeholder="圈子推荐,圈子海报中展示"
          />
          <text>（{{ InputContent.length }}/100）</text>
        </view>

        <view class="prompt-btn-group">
          <view class="btn-item" @tap="_cancel">取消</view>
          <view class="btn-item last-btn" @tap="_confirm">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import request from "../../utils/request.js";
import avatar from "../../module/yq-avatar/yq-avatar.vue"; //图片剪裁
export default {
  data() {
    return {
      upToken: "",
      qiniuyun: "",
      qiniuUrl: "",
      title: "", //名称
      photo: "", //头像
      oldPhoto: "",
      content: "",
      urls: [],
      labelLists: [], //标签数组
      lable_L: "", //标签
      quan_Id: "", //圈子id
      orgDetail: {},
      code: 0,
      InputTitle: "",
      isHidden: false,
      isInT: 3,
      // isIos : 100,
      InputContent: "",
      maxTitle: 20,
      maxContent: 100,
      isEdited1: false,
      isEdited2: false,
      isEdited3: false,
      isEdited4: false,
      isEdited5: false,
      isPhoto: true,
    };
  },
  components: {
    avatar,
  },
  onShow() {
    this.handleDetail_lable(); //标签
    this.isEdited1 = false;
    this.isEdited2 = false;
    this.isEdited3 = false;
    this.isEdited4 = false;
    this.isEdited5 = false;
  },
  onLoad(options) {
    // let platform=uni.getSystemInfoSync().platform
    // if(platform=='ios'){
    // 	   this.isIos = 99
    // }else if(platform=='android'){
    // 	  this.isIos = 100
    // }
    this.quan_Id = options.id;
    if (options.code) {
      this.code = options.code;
    }
    this.handleDetail(); //信息渲染
    request({
      //上传图片参数(七牛云)
      url: "h5/home/uploadApplication",
      method: "post",
      header: {
        "content-type": "application/json;charset=UTF-8",
        "api-client": "72e0fee8172411ea995200163e05ff66",
        "api-version": this.globalData.apiVersion,
        "Source-Type": 7,
      },
      data: {},
    }).then((res) => {
      this.upToken = res.data.data.upToken;
      this.qiniuyun = res.data.data.qiniuDomain;
      this.qiniuUrl = res.data.data.region;
    });
  },
  methods: {
    hanldeTan(index) {
      if (index == 1) {
        this.isEdited1 = true;
      } else if (index == 2) {
        this.isEdited3 = true;
      }
      this.isHidden = true;
      this.isInT = index;
    },
    toBiaoqian() {
      uni.navigateTo({
        url: "/pages/index/customTag?id=" + this.quan_Id,
      });
      this.isEdited4 = true;
    },
    toCy() {
      uni.navigateTo({
        url: "/pages/index/memberSet?id=" + this.quan_Id,
      });
      this.isEdited5 = true;
    },
    toHaibao() {
      let str = uni.getStorageSync("photo");
      if (
        this.isEdited1 ||
        this.isEdited2 ||
        this.isEdited3 ||
        this.isEdited4 ||
        this.isEdited5 ||
        this.orgDetail.orgUrl != this.photo ||
        str == 1
      ) {
        uni.showModal({
          title: "提示",
          content: "是否保存圈子设置",
          confirmText: "保存",
          confirmColor: "#000",
          cancelText: "再想想",
          cancelColor: "#007aff",
          success: (re) => {
            if (re.confirm) {
              uni.removeStorageSync("photo");
              this.handleBaocan(1);
            }
          },
        });
      } else {
        uni.navigateTo({
          url: "/pages/circle/promotionPoster?id=" + this.quan_Id,
        });
      }
    },
    handleTitle(e) {
      this.InputTitle = e.detail.value;
      setTimeout(() => {
        this.InputTitle = e.detail.value;
        this.InputTitle = this.InputTitle.trim();
      }, 0);
    },
    handleContent(e) {
      var testLabel = /^[0-9a-zA-Z\u4E00-\u9FA5\(\)]*$/;
      this.InputContent = e.detail.value;
      setTimeout(() => {
        this.InputContent = e.detail.value;
        if (
          testLabel.test(this.InputContent[98]) &&
          !testLabel.test(this.InputContent[99])
        ) {
          this.InputContent = this.InputContent.substring(0, 99);
        } else {
          this.InputContent = this.InputContent.substring(0, 100);
        }
      }, 0);
    },
    _confirm() {
      if (this.isInT == 1) {
        this.title = this.InputTitle;
      } else if (this.isInT == 2) {
        this.content = this.InputContent;
      }

      this.isHidden = false;
    },
    _cancel() {
      this.isHidden = false;
    },
    handleBaocan(index) {
      let that = this;
      //点击保存
      if (this.title.trim() == "") {
        uni.showToast({
          title: "未设置圈子名称",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      if (!this.isPhoto) {
        return false;
      }
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 1500);
      } else {
        request({
          url: "h5/orgCircle/updateFriends",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgName: this.title.trim(),
            orgUrl: this.photo,
            coverUrl: "",
            orgIntroduce: this.content,
            dependencyId: this.arrayId,
            businessRange: this.businessRange, //行业id
            id: this.quan_Id,
            labelLists: this.labelLists, //标签数组
            friendsType: this.orgDetail.friendsType,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            uni.showToast({
              title: "保存成功",
              duration: 1500,
              icon: "none",
            });
            if (index == 1) {
              setTimeout(() => {
                uni.navigateTo({
                  url: "/pages/circle/promotionPoster?id=" + that.quan_Id,
                });
              }, 1500);
            } else {
              setTimeout(() => {
                uni.navigateBack({
                  delta: 1,
                });
              }, 1500);
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleZhuX() {
      //注销圈子
      uni.showModal({
        title: "提示",
        content: "是否注销该圈子",
        confirmText: "注销",
        confirmColor: "#000",
        cancelText: "再想想",
        cancelColor: "#007aff",
        success: (re) => {
          if (re.confirm) {
            let token = uni.getStorageSync("token");
            // console.log(token, 'token')
            if (!token) {
              uni.showToast({
                title: "请授权登录再操作！",
                duration: 2000,
                icon: "none",
              });
              setTimeout(() => {
                uni.navigateTo({
                  url: "/pages/index/index",
                });
              }, 2000);
            } else {
              request({
                url: "h5/orgCircle/cancelCircle ",
                method: "POST",
                header: {
                  "Content-Type": "application/json",
                  "api-client": "72e0fee8172411ea995200163e05ff66",
                  "api-version": this.globalData.apiVersion,
                  "Source-Type": 7,
                  token: token,
                },
                data: {
                  orgId: this.quan_Id,
                },
              }).then((res) => {
                // console.log(res, '注销圈子')
                if (res.data.code == 200) {
                  uni.showToast({
                    title: "注销成功",
                    duration: 1500,
                    icon: "none",
                  });

                  setTimeout(() => {
                    if (this.code == 1) {
                      // uni.navigateBack({
                      //     delta: 2
                      // });
                      uni.reLaunch({
                        url: "/pages/index/index",
                      });
                    } else {
                      uni.navigateBack({
                        delta: 1,
                      });
                    }
                  }, 1500);
                } else {
                  uni.showToast({
                    title: res.data.msg,
                    duration: 2000,
                    icon: "none",
                  });
                }
              });
            }
          }
        },
      });
    },
    handleDetail() {
      //圈子基本信息渲染
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 1500);
      } else {
        request({
          url: "h5/orgCircle/friendsHomeInfo",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgId: this.quan_Id,
          },
        }).then((res) => {
          // console.log(res, '圈子')
          if (res.data.code == 200) {
            this.orgDetail = res.data.data;
            this.title = res.data.data.orgName;
            this.InputTitle = res.data.data.orgName;
            this.photo = res.data.data.orgUrl;
            this.oldPhoto = res.data.data.orgUrl;
            this.content = res.data.data.orgIntroduce;
            this.InputContent = res.data.data.orgIntroduce;
            this.lable_L = res.data.data.friendsLists.join("/")
              ? res.data.data.friendsLists.join("/")
              : "";
            this.labelLists = res.data.data.friendsLists;
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleDetail_lable() {
      //标签
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "h5/orgCircle/friendsHomeInfo",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgId: this.quan_Id,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            this.lable_L = res.data.data.friendsLists.join("/");
            this.labelLists = res.data.data.friendsLists;
            this.orgDetail.chargeAmount = res.data.data.chargeAmount;
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    clk() {
      //上传图片
      this.$refs.avatar.fChooseImg(2, {
        selWidth: "400upx",
        selHeight: "400upx",
        inner: false,
        canRotate: false,
      });
      this.isEdited2 = true;
      uni.setStorageSync("photo", "1");
    },
    doUpload(rsp) {
      this.$set(this.urls, rsp.index, rsp.path);
      this.oldPhoto = rsp.path;
      this.isPhoto = false;
      uni.uploadFile({
        url: "https://up-z0.qiniup.com",
        filePath: rsp.path,
        name: "file",
        formData: {
          token: this.upToken,
        },
        success: (uploadFileRes) => {
          this.photo = this.qiniuyun + "/" + JSON.parse(uploadFileRes.data).key;
          this.isPhoto = true;
          // console.log(this.photo)
        },
      });
    },
    fanLastPage() {
      //返回上一页
      let str = uni.getStorageSync("photo");
      if (
        this.isEdited1 ||
        this.isEdited2 ||
        this.isEdited3 ||
        this.isEdited4 ||
        this.isEdited5 ||
        this.orgDetail.orgUrl != this.photo ||
        str == 1
      ) {
        uni.showModal({
          title: "提示",
          content: "是否保存此次编辑？",
          confirmText: "保存并返回",
          confirmColor: "#000",
          cancelText: "取消",
          cancelColor: "#007aff",
          success: (re) => {
            if (re.confirm) {
              uni.removeStorageSync("photo");
              this.handleBaocan();
            } else if (re.cancel) {
              uni.removeStorageSync("photo");
              window.history.go(-1);
            }
          },
        });
      } else {
        window.history.go(-1);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.prompt-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 120%;
  z-index: 11;
  background: rgba(0, 0, 0, 0.4);
}

.prompt-content {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 80%;
  max-width: 600rpx;
  border: 2rpx solid #ccc;
  border-radius: 10rpx;
  box-sizing: bordre-box;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: #fff;
}

.prompt-title {
  width: 100%;
  /* padding: 20rpx; */
  padding: 20rpx 0;
  text-align: center;
  font-size: 40rpx;
  border-bottom: 2rpx solid #eee;
  font-size: 36rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}

.prompt-input {
  margin: 8%;
  padding: 10rpx 15rpx;
  width: 80%;
  height: 85rpx;
  border: 1px solid #ccc;
  border-radius: 10rpx;
  position: relative;
  z-index: 9999;
}

.textarea {
  width: 520rpx;
  height: 320rpx;
  background: rgba(248, 248, 250, 1);
  border-radius: 8rpx;
  margin: 30rpx auto;
  position: relative;
  position: relative;
  z-index: 9999;
}

.textarea text {
  display: inline-block;
  position: absolute;
  font-size: 22rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(204, 204, 204, 1);
  line-height: 30rpx;
  bottom: 16rpx;
  right: 12rpx;
}

.prompt-textarea {
  width: 100%;
  height: 100%;
  padding: 14rpx 22rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(70, 70, 70, 1);
  line-height: 40rpx;
}

.prompt-btn-group {
  display: flex;
  height: 100rpx;
  border-top: 1rpx solid rgba(221, 221, 221, 1);
}

.btn-item {
  width: 50%;
  height: 100rpx;
  line-height: 100rpx;
  background-color: white;
  font-size: 36rpx;
  /* font-family:PingFangSC-Regular,PingFang SC; */
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  text-align: center;
}

.last-btn {
  color: #2168eb;
  border-left: 2rpx solid #eee;
}

.main {
  padding-top: 92rpx;
  padding-bottom: 40rpx;
  .zhuxiao {
    margin: 20rpx auto;
    margin-bottom: 0;
    width: 132rpx;
    height: 48rpx;
    border: 1px solid #979797;
    border-radius: 25rpx;
    text-align: center;
    line-height: 48rpx;
    font-size: 26rpx;
    color: #999;
  }

  .higeSet {
    padding: 40rpx 36rpx;

    .title {
      font-size: 36rpx;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      color: #111111;
      margin-bottom: 30rpx;
    }

    .list_ {
      display: flex;
      justify-content: space-between;

      .item_ {
        padding-top: 30rpx;
        padding-bottom: 33rpx;
        box-sizing: border-box;
        width: 214rpx;
        height: 214rpx;
        background: #f5f5f5;
        border-radius: 8rpx;
        display: flex;
        flex-direction: column;
        align-items: center;

        image {
          width: 68rpx;
          height: 68rpx;
        }

        .top_ {
          margin-top: 13rpx;
          font-size: 26rpx;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: #111111;
        }

        .bottom_ {
          margin-top: 6rpx;
          font-size: 26rpx;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: #999999;
        }
      }
    }
  }

  .basSet {
    padding: 40rpx 36rpx;
    padding-bottom: 0;

    .title {
      font-size: 36rpx;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      text-align: justify;
      color: #111111;
    }

    .list_ {
      margin-top: 20rpx;

      .item_ {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1rpx solid #ddd;
        height: 110rpx;
        &:last-child {
          border-bottom: none;
        }
        .zuo_ {
          font-size: 34rpx;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          // text-align: left;
          color: #111111;
          flex-shrink: 0;
          margin-right: 30rpx;
        }
        .you_ {
          display: flex;
          align-items: center;
          font-size: 32rpx;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: #111111;
          text {
            // width: 400rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }
          .kong_ {
            font-size: 32rpx;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            // text-align: right;
            color: #999999;
          }
          .right_ {
            flex-shrink: 0;
            width: 22rpx;
            height: 26rpx;
            margin-left: 20rpx;
          }
          .you2 {
            text {
              width: 400rpx;
            }
          }

          .you_tu {
            flex-shrink: 0;
            width: 66rpx;
            height: 66rpx;
            border-radius: 8rpx;
          }
        }

        .you_wu {
          color: #999;
        }
      }
    }
  }

  .xian_hui {
    width: 750rpx;
    height: 14rpx;
    background: #f5f5f5;
  }

  .show_ {
    padding: 40rpx 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .shu_xian {
      width: 1rpx;
      height: 42rpx;
      background-color: #ddd;
    }

    .item_ {
      // width: 24%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      height: 80rpx;

      .shang_ {
        font-size: 36rpx;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        color: #111111;
      }

      .xia_ {
        font-size: 24rpx;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #999;
      }
    }

    .item1 {
      padding-left: 36rpx;
      // display: flex;
      align-items: flex-start;
    }

    .item2 {
      padding-right: 36rpx;
      // display: flex;
      align-items: flex-end;
    }
  }

  .top_tou {
    box-sizing: border-box;
    display: flex;
    padding: 0 38rpx;
    width: 750rpx;
    height: 92rpx;
    background: #f8f8f8;
    line-height: 92rpx;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;

    .left_ {
      height: 28rpx;
      width: 18rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .center_ {
      font-size: 36rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #111111;
    }

    .right_ {
      font-size: 28rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: right;
      color: #0f6ede;
    }
  }
}
</style>
